<!--
  @author:  long
  @date:    2023/4/4
  @file:    绩效查询
  @require:
-->
<template>
  <div class="performanceQuery">
    <FixedOperation>
      <div class="flex items-center relative justify-between">
        <div class="">
          <TitleName title="绩效查询" icon="i-ion-ios-paper"></TitleName>
        </div>

        <!-- 内容 -->
        <div class="flex items-center">
          <div
            @click="switchType('personal')"
            :class="['tab-item', isActive == 'personal' ? 'isActive' : '']"
          >
            个人绩效
          </div>
          <div
            v-if="deptShow"
            @click="switchType('department')"
            :class="['tab-item', isActive == 'department' ? 'isActive' : '']"
          >
            部门绩效
          </div>
          <div
            v-if="unitShow"
            @click="switchType('unit')"
            :class="['tab-item', isActive == 'unit' ? 'isActive' : '']"
          >
            单位绩效
          </div>
          <div
            v-if="leadersDeptShow"
            @click="switchType('leadersDept')"
            :class="['tab-item', isActive == 'leadersDept' ? 'isActive' : '']"
          >
            分管部门
          </div>
        </div>
        <div>
          <el-button
            type="primary"
            v-if="
              (isActive == 'personal' && displayMode == '1') ||
              (isActive == 'unit' && displayMode == '1')
            "
            @click="exportQuery"
          >
            导出
          </el-button>
        </div>
      </div>
    </FixedOperation>
    <div class="app-container">
      <div>
        <el-row class="flex items-center justify-between mb-5">
          <el-col
            :span="isActive == 'personal' && displayMode == '1' ? 8 : 6"
            class="flex items-center"
          >
            <!--   内容主体   -->
            <el-radio-group v-model="displayMode" size="large">
              <el-radio-button
                v-for="(item, index) in displayModeOptions[isActive]"
                :key="item + index"
                :label="item.value"
                @change="switchMode(item)"
                >{{ item.label }}</el-radio-button
              >
            </el-radio-group>
            <div
              class="ml-2 text-xl"
              v-if="
                isActive == 'personal' &&
                displayMode == '1' &&
                tableData.length > 0
              "
            >
              {{ userStore.user.nickName }}{{ queryForm.month }}月个人绩效
              总得分:{{ totalScore }}分
            </div>
          </el-col>
          <!--     操作栏      -->
          <el-col
            :span="isActive == 'personal' && displayMode == '1' ? 16 : 18"
          >
            <el-row class="flex justify-end" :gutter="10">
              <el-col :span="4" v-if="btnsShowObj.orgBtnShow">
                <el-tree-select
                  v-model="orgId"
                  :data="companyOptions"
                  @change="handleSelectChange"
                  :check-strictly="true"
                  clearable
                  class="org"
                  :props="{
                    value: 'id',
                    label: 'label',
                    children: 'children'
                  }"
                  placeholder="请选择单位"
                  value-key="id"
                  filterable
                />
              </el-col>
              <el-col :span="4" v-if="btnsShowObj.deptBtnShow">
                <!--    考核部门      -->
                <el-tree-select
                  v-model="deptId"
                  node-key="id"
                  clearable
                  class="dept"
                  :data="deptData"
                  :props="deptProps"
                  :render-after-expand="false"
                  placeholder="考核部门"
                  filterable
                  @change="handleSelectChange"
                />
              </el-col>
              <el-col :span="4" v-if="btnsShowObj.leadersDeptBtnShow">
                <!--    分管部门      -->
                <el-tree-select
                  v-model="leadersDeptId"
                  node-key="deptId"
                  :check-strictly="true"
                  clearable
                  :props="{ label: 'deptName' }"
                  class="leadersDept"
                  :default-expanded-keys="[100]"
                  :data="leadersDeptOptions"
                  :render-after-expand="false"
                  placeholder="分管部门"
                  filterable
                  @change="handleSelectChange"
                />

                <!--    分管领导部门      -->
                <!--                <el-select-->
                <!--                  v-model="leadersDeptId"-->
                <!--                  clearable-->
                <!--                  class="leadersDept"-->
                <!--                  placeholder="分管部门"-->
                <!--                  filterable-->
                <!--                  @change="handleSelectChange"-->
                <!--                >-->
                <!--                  <el-option-->
                <!--                    v-for="(item, index) in leadersDeptOptions"-->
                <!--                    :key="index"-->
                <!--                    :label="item.deptName"-->
                <!--                    :value="item.deptId"-->
                <!--                  >-->
                <!--                  </el-option>-->
                <!--                </el-select>-->
              </el-col>

              <el-col :span="7" v-if="btnsShowObj.userBtnShow">
                <el-select
                  v-model="queryForm.userId"
                  placeholder="请选择人员"
                  @focus="userInputFocus"
                  multiple
                  class="w-full"
                  clearable
                  @clear="userInputClear"
                  @remove-tag="userRemoveTagClear"
                >
                  <el-option
                    v-for="(item, index) in selectOptionObj['userId']"
                    :key="index"
                    :label="item.label"
                    :value="item.uuid"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="3" v-if="btnsShowObj.levelBtnShow">
                <el-select
                  v-model="queryForm.level"
                  placeholder="次级"
                  class="level"
                  clearable
                  style="width: 100px"
                  @change="handleSelectChange"
                >
                  <el-option
                    v-for="item in assessment_rating"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="3" v-if="btnsShowObj.yearBtnShow">
                <!--    年度        -->
                <el-date-picker
                  v-model="queryForm.year"
                  type="year"
                  format="YYYY"
                  class="year"
                  style="width: 100%"
                  :clearable="false"
                  value-format="YYYY"
                  placeholder="年份选择"
                  @change="handleSelectChange"
                />
              </el-col>
              <el-col :span="3" v-if="btnsShowObj.monthBtnShow">
                <el-cascader
                  :show-all-levels="false"
                  v-model="slsdVal"
                  :options="timeOptions"
                  :clearable="tableType != 'details'"
                  @change="timeChange"
                ></el-cascader>

                <!--     月份       -->
                <!--                <el-select-->
                <!--                  v-model="queryForm.month"-->
                <!--                  class="month"-->
                <!--                  popper-class="monthPopper"-->
                <!--                  placeholder="月份选择"-->
                <!--                  :clearable="tableType != 'details'"-->
                <!--                  @change="handleSelectChange"-->
                <!--                >-->
                <!--                  <el-option-->
                <!--                    v-for="(item, i) in monthNames"-->
                <!--                    :key="i"-->
                <!--                    :label="item.label"-->
                <!--                    :value="item.value"-->
                <!--                  >-->
                <!--                  </el-option>-->
                <!--                </el-select>-->
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!--     绩效详情     -->
        <PerformanceDetails
          v-if="tableType == 'details'"
          :tableData="tableData"
          :isActive="isActive"
        />
        <!--     各类绩效列表     -->
        <PerformanceList
          v-if="tableType != 'details'"
          :tableLoading="loading"
          :tableData="tableData"
          :tableType="tableType"
          :queryForm="queryForm"
          @checkMode="checkMode"
          :isActive="isActive"
          :slsdVal="slsdVal"
        />
      </div>
    </div>
    <SelectDialog :dialog-param="dialogParam" @ok="selectData"></SelectDialog>
  </div>
</template>

<script setup name="PerformanceQuery">
import { getCurrentInstance } from 'vue'
import useCommonStore from '@/store/modules/common'
import PerformanceDetails from './modules/details'
import PerformanceList from './modules/list'
import useUserStore from '@/store/modules/user'
import { getUser } from '@/api/system/user'
import { format, subMonths, subYears } from 'date-fns'
import {
  getAssessDeptList,
  getAssessOrgList,
  getAssessPersonList,
  getAssessViewList,
  getBranchList,
  getDeptListByLeader
} from '@/api/officeManage/performance'
import { treeselect } from '@/api/rsgl/ygda'
import { handleTree } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()
// 通用数据store
const commonStore = useCommonStore()
const userStore = useUserStore()

const deptShow = ref(false)
const unitShow = ref(false)
const leadersDeptShow = ref(false)
const slsdVal = ref(['01', '01'])
const timeOptions = ref([
  {
    value: '01',
    label: '月份',
    id: '01',
    children: [
      {
        value: '00',
        label: '全部',
        pid: '01'
      },
      {
        value: '01',
        label: '一月',
        pid: '01'
      },
      {
        value: '02',
        label: '二月',
        pid: '01'
      },
      {
        value: '03',
        label: '三月',
        pid: '01'
      },
      {
        value: '04',
        label: '四月',
        pid: '01'
      },
      {
        value: '05',
        label: '五月',
        pid: '01'
      },
      {
        value: '06',
        label: '六月',
        pid: '01'
      },
      {
        value: '07',
        label: '七月',
        pid: '01'
      },
      {
        value: '08',
        label: '八月',
        pid: '01'
      },
      {
        value: '09',
        label: '九月',
        pid: '01'
      },
      {
        value: '10',
        label: '十月',
        pid: '01'
      },
      {
        value: '11',
        label: '十一月',
        pid: '01'
      },
      {
        value: '12',
        label: '十二月',
        pid: '01'
      }
    ]
  },
  {
    value: '02',
    label: '季度',
    id: '02',
    children: [
      {
        value: '00',
        label: '全部',
        pid: '02'
      },
      {
        value: '01',
        label: '第一季',
        pid: '02'
      },
      {
        value: '02',
        label: '第二季',
        pid: '02'
      },
      {
        value: '03',
        label: '第三季',
        pid: '02'
      },
      {
        value: '04',
        label: '第四季',
        pid: '02'
      }
    ]
  },
  {
    value: '03',
    label: '半年',
    id: '03',
    children: [
      { value: '00', label: '全部', pid: '03' },
      { value: '01', label: '上半年', pid: '03' },
      { value: '02', label: '下半年', pid: '03' }
    ]
  },
  {
    value: '04',
    label: '全年',
    id: '04',
    children: [{ value: '01', label: '全年', pid: '04' }]
  }
])

// 选中的tab
const isActive = ref('personal')
const data = reactive({
  tableType: 'details',
  displayMode: '1', //显示模式 个人：personal 部门：department 单位：unit
  displayModeOptions: {
    personal: [
      {
        label: '明细视图',
        value: '1',
        tableType: 'details',
        btnShow: ['yearBtnShow', 'monthBtnShow']
      },
      {
        label: '列表显示',
        value: '2',
        tableType: 'personList',
        btnShow: ['levelBtnShow', 'yearBtnShow', 'monthBtnShow']
      }
    ], //个人
    department: [
      {
        label: '人员视图',
        value: '1',
        tableType: 'deptPersonList',
        btnShow: ['userBtnShow', 'yearBtnShow', 'monthBtnShow']
      },
      {
        label: '列表显示',
        value: '2',
        tableType: 'deptList',
        btnShow: ['yearBtnShow', 'monthBtnShow']
      }
    ], //部门
    unit: [
      {
        label: '人员视图',
        value: '1',
        tableType: 'deptPersonList',
        btnShow: [
          'orgBtnShow',
          'deptBtnShow',
          'userBtnShow',
          'levelBtnShow',
          'yearBtnShow',
          'monthBtnShow'
        ]
      },
      {
        label: '部门视图',
        value: '2',
        tableType: 'deptList',
        btnShow: ['orgBtnShow', 'deptBtnShow', 'yearBtnShow', 'monthBtnShow']
      },
      {
        label: '单位显示',
        value: '3',
        tableType: 'orgList',
        btnShow: ['orgBtnShow', 'yearBtnShow', 'monthBtnShow']
      }
    ], //单位
    leadersDept: [
      {
        label: '人员视图',
        value: '1',
        tableType: 'deptPersonList',
        btnShow: [
          'userBtnShow',
          'leadersDeptBtnShow',
          'yearBtnShow',
          'monthBtnShow'
        ]
      },
      {
        label: '列表显示',
        value: '2',
        tableType: 'deptList',
        btnShow: ['leadersDeptBtnShow', 'yearBtnShow', 'monthBtnShow']
      }
    ] //分管部门
  },
  queryForm: {
    year: format(new Date(), 'yyyy'),
    month: '',
    level: '',
    assessTimeType: '01'
  },
  deptProps: { label: 'label' },

  deptData: [],
  leadersDeptOptions: [],
  companyOptions: [],
  monthNames: [
    { label: '一月', value: '01' },
    { label: '二月', value: '02' },
    { label: '三月', value: '03' },
    { label: '四月', value: '04' },
    { label: '五月', value: '05' },
    { label: '六月', value: '06' },
    { label: '七月', value: '07' },
    { label: '八月', value: '08' },
    { label: '九月', value: '09' },
    { label: '十月', value: '10' },
    { label: '十一月', value: '11' },
    { label: '十二月', value: '12' }
  ],

  dialogParam: {}, //弹窗组件配置
  selectOptionObj: {}, // select
  btnsShowObj: {
    //年度操作按钮
    yearBtnShow: false,
    monthBtnShow: false,
    levelBtnShow: false,
    deptBtnShow: false,
    orgBtnShow: false,
    leadersDeptBtnShow: false
  },
  userInfo: {}, //用户信息
  orgId: '',
  userId: '',
  deptId: '',
  leadersDeptId: '',
  tableData: [],
  totalScore: 0
})
const {
  displayMode,
  displayModeOptions,
  deptData,
  queryForm,
  deptProps,
  monthNames,
  companyOptions,
  dialogParam,
  selectOptionObj,
  tableType,
  btnsShowObj,
  userInfo,
  leadersDeptOptions,
  orgId,
  userId,
  deptId,
  leadersDeptId,
  tableData,
  totalScore
} = toRefs(data)

const { assessment_rating } = proxy.useDict('assessment_rating')
const loading = ref(false)
//获取选择的时间
const timeChange = val => {
  queryForm.value.month = val[1]
  queryForm.value.assessTimeType = val[0]
  handleSelectChange()
}

/**
 * 绩效导出
 */
const exportQuery = () => {
  let params = {
    appraiseeOrg: orgId.value,
    appraiseeDept: deptId.value,
    assessAtTime: queryForm.value.month,
    assessTimeType: queryForm.value.assessTimeType,
    assessAtYear: queryForm.value.year,
    resultLevel: queryForm.value.level
  }
  if (isActive.value == 'personal') {
    params.appraiseeId = userId.value
    proxy.downLoadByUrl(
      '/office/bizOfficeAssessScore/viewListOutput',
      params,
      '个人明细考核记录.xlsx'
    )
  } else if (isActive.value == 'unit') {
    params.apraiseeId = userId.value
    proxy.downLoadByUrl(
      '/office/bizOfficeAssessScore/personListOutput',
      params,
      '单位人员考核记录.xlsx'
    )
  }
}

/**
 * 人员input清空事件
 */
const userInputClear = () => {
  userId.value = ''
  queryForm.value.userId = []
  //获取人员视图
  getAssessPersonListByUserInfo()
}

/**
 * 人员tag移除事件
 */
const userRemoveTagClear = tag => {
  if (queryForm.value.userId.length > 0) {
    userId.value = queryForm.value.userId
      .map(item => {
        return item.substring(1)
      })
      .join(',')
  } else {
    userId.value = ''
  }

  //获取人员视图
  getAssessPersonListByUserInfo()
}

/**
 * 从表格跳转到人员视图事件
 */
const checkMode = (level, row) => {
  queryForm.value.level = level
  queryForm.value.month = row.assessAtTime
  queryForm.value.assessTimeType = row.assessTimeType
  slsdVal.value = [row.assessTimeType, row.assessAtTime]
  queryForm.value.year = row.assessAtYear
  console.info(queryForm.value)
  // queryForm.value.orgId = row.appraiseeOrg
  if (isActive.value == 'unit') {
    //单位
    orgId.value = row.comId * 1
    userId.value = ''

    if (tableType.value == 'deptList') {
      deptId.value = row.bmId * 1
    } else {
      deptId.value = ''
    }
  } else if (isActive.value == 'leadersDept') {
    //分管领导
    leadersDeptId.value = row.bmId * 1
  }

  // queryForm.value.deptId = row.appraiseeDept

  displayMode.value = displayModeOptions.value[isActive.value][0].value
  tableType.value = displayModeOptions.value[isActive.value][0].tableType
  switchBtnShow()
  if (isActive.value == 'leadersDept') {
    getLeadersPersonListByUserInfo()
  } else {
    getAssessPersonListByUserInfo()
  }
}

/**
 * 表单选择事件
 */
const handleSelectChange = async val => {
  //   根据选中的tabs判断触发的接口
  switch (isActive.value) {
    //   个人绩效
    case 'personal':
      if (tableType.value === 'details') {
        // 获取个人明细视图列表
        getAssessViewListByUserId()
      }
      if (tableType.value === 'personList') {
        //获取个人列表
        getAssessPersonListByUserInfo()
      }
      break
    //   部门绩效
    case 'department':
      if (tableType.value === 'deptPersonList') {
        // 获取人员视图
        getAssessPersonListByUserInfo()
      }
      if (tableType.value === 'deptList') {
        //获取列表
        getAssessDeptListByUserInfo()
      }
      break
    //   单位绩效
    case 'unit':
      if (tableType.value === 'deptPersonList') {
        getDeptData()
        // 获取人员视图
        getAssessPersonListByUserInfo()
      }
      if (tableType.value === 'deptList') {
        getDeptData()
        //获取列表
        getAssessDeptListByUserInfo()
      }
      if (tableType.value === 'orgList') {
        queryForm.value.level = ''
        deptId.value = ''
        //获取列表
        getAssessOrgListByUserInfo()
      }

      break
    //   分管领导
    case 'leadersDept':
      if (tableType.value === 'deptPersonList') {
        // 获取分管部门人员视图
        getLeadersPersonListByUserInfo()
      }
      if (tableType.value === 'deptList') {
        // await getLeadersDeptData()
        //获取列表
        await getBranchListByUserInfo()
      }
      break
  }
}

/**
 * 切换类型
 * @param type
 */
const switchType = async type => {
  isActive.value = type

  //   单位
  if (type == 'unit') {
    displayMode.value = displayModeOptions.value[type][2].value
    tableType.value = displayModeOptions.value[type][2].tableType
    orgId.value = userStore.user.orgId
  } else if (type == 'department') {
    // 部门
    deptId.value = userStore.user.dept.deptId
    orgId.value = userStore.user.orgId
    userId.value = ''
    displayMode.value = displayModeOptions.value[type][0].value
    tableType.value = displayModeOptions.value[type][0].tableType
  } else if (type == 'leadersDept') {
    // 分管领导
    deptId.value = userStore.user.dept.deptId
    orgId.value = userStore.user.orgId
    userId.value = ''
    displayMode.value = displayModeOptions.value[type][1].value
    tableType.value = displayModeOptions.value[type][1].tableType
  } else {
    // 个人
    deptId.value = userStore.user.dept.deptId
    orgId.value = userStore.user.orgId
    userId.value = userStore.user.userId
    displayMode.value = displayModeOptions.value[type][0].value
    tableType.value = displayModeOptions.value[type][0].tableType
  }
  await initQueryForm()
  await switchBtnShow()
  await handleSelectChange()
}

/**
 * 切换显示模式
 * @param mode
 */
const switchMode = async (mode, obj = {}) => {
  displayMode.value = mode.value
  tableType.value = mode.tableType
  tableData.value = []
  await initQueryForm()
  await switchBtnShow()

  // 个人绩效明细视图时间只显示月份
  if (isActive.value == 'personal' && tableType.value === 'details') {
    timeOptions.value = [
      {
        value: '01',
        label: '月份',
        id: '01',
        children: [
          {
            value: '00',
            label: '全部',
            pid: '01'
          },
          {
            value: '01',
            label: '一月',
            pid: '01'
          },
          {
            value: '02',
            label: '二月',
            pid: '01'
          },
          {
            value: '03',
            label: '三月',
            pid: '01'
          },
          {
            value: '04',
            label: '四月',
            pid: '01'
          },
          {
            value: '05',
            label: '五月',
            pid: '01'
          },
          {
            value: '06',
            label: '六月',
            pid: '01'
          },
          {
            value: '07',
            label: '七月',
            pid: '01'
          },
          {
            value: '08',
            label: '八月',
            pid: '01'
          },
          {
            value: '09',
            label: '九月',
            pid: '01'
          },
          {
            value: '10',
            label: '十月',
            pid: '01'
          },
          {
            value: '11',
            label: '十一月',
            pid: '01'
          },
          {
            value: '12',
            label: '十二月',
            pid: '01'
          }
        ]
      }
    ]
  } else {
    timeOptions.value = [
      {
        value: '01',
        label: '月份',
        id: '01',
        children: [
          {
            value: '00',
            label: '全部',
            pid: '01'
          },
          {
            value: '01',
            label: '一月',
            pid: '01'
          },
          {
            value: '02',
            label: '二月',
            pid: '01'
          },
          {
            value: '03',
            label: '三月',
            pid: '01'
          },
          {
            value: '04',
            label: '四月',
            pid: '01'
          },
          {
            value: '05',
            label: '五月',
            pid: '01'
          },
          {
            value: '06',
            label: '六月',
            pid: '01'
          },
          {
            value: '07',
            label: '七月',
            pid: '01'
          },
          {
            value: '08',
            label: '八月',
            pid: '01'
          },
          {
            value: '09',
            label: '九月',
            pid: '01'
          },
          {
            value: '10',
            label: '十月',
            pid: '01'
          },
          {
            value: '11',
            label: '十一月',
            pid: '01'
          },
          {
            value: '12',
            label: '十二月',
            pid: '01'
          }
        ]
      },
      {
        value: '02',
        label: '季度',
        id: '02',
        children: [
          {
            value: '00',
            label: '全部',
            pid: '02'
          },
          {
            value: '01',
            label: '第一季',
            pid: '02'
          },
          {
            value: '02',
            label: '第二季',
            pid: '02'
          },
          {
            value: '03',
            label: '第三季',
            pid: '02'
          },
          {
            value: '04',
            label: '第四季',
            pid: '02'
          }
        ]
      },
      {
        value: '03',
        label: '半年',
        id: '03',
        children: [
          { value: '00', label: '全部', pid: '03' },
          { value: '01', label: '上半年', pid: '03' },
          { value: '02', label: '下半年', pid: '03' }
        ]
      },
      {
        value: '04',
        label: '全年',
        id: '04',
        children: [{ value: '01', label: '全年', pid: '04' }]
      }
    ]
  }

  //   根据选中的tabs判断触发的接口
  switch (isActive.value) {
    //   个人绩效
    case 'personal':
      if (tableType.value === 'details') {
      }
      if (tableType.value === 'personList') {
        userId.value = userStore.user.userId
        orgId.value = userStore.user.orgId
        deptId.value = userStore.user.dept.deptId
        slsdVal.value = ['01', '00']
        //   设置月份为空
        queryForm.value.month = '00'
      }
      break
    //   部门绩效
    case 'department':
      if (tableType.value === 'deptPersonList') {
        // 获取人员视图
      }
      if (tableType.value === 'deptList') {
        //获取列表
        queryForm.value.month = slsdVal.value[1]
      }
      break
    //   单位绩效
    case 'unit':
      orgId.value = userStore.user.orgId
      if (tableType.value === 'deptPersonList') {
        deptId.value = userStore.user.dept.deptId
        getDeptData()
      }
      if (tableType.value === 'deptList') {
        deptId.value = userStore.user.dept.deptId
        getDeptData()
      }
      if (tableType.value === 'orgList') {
      }

      break
    //   分管领导部门
    case 'leadersDept':
      if (tableType.value === 'deptPersonList') {
        // 获取人员视图
        if (leadersDeptOptions.value.length > 0) {
          leadersDeptId.value = leadersDeptOptions.value[0].deptId
        }
      }
      if (tableType.value === 'deptList') {
        leadersDeptId.value = ''
        //获取列表
        queryForm.value.month = ''
        // await getLeadersDeptData()
      }
      break
  }
  await handleSelectChange()
}

/**
 * 初始化时间
 */
const initQueryForm = () => {
  let month = format(subMonths(new Date(), 1), 'MM')
  queryForm.value = {
    year:
      month == '12'
        ? format(subYears(new Date(), 1), 'yyyy')
        : format(new Date(), 'yyyy'),
    month: month,
    assessTimeType: '01',
    level: ''
  }
  slsdVal.value = ['01', month]
}
/**
 * 切换按钮显示
 */
const switchBtnShow = () => {
  // 选中的类型
  let type = isActive.value
  //   选中的模式
  let mode = displayMode.value
  let btnShow = displayModeOptions.value[type].find(
    item => item.value == mode
  ).btnShow
  for (let key in btnsShowObj.value) {
    btnsShowObj.value[key] = false
  }
  btnShow.forEach(item => {
    btnsShowObj.value[item] = true
  })
}

/**
 * 弹窗选取获取选中的值
 * @param val
 *  type 业务类型
 *     selectData 选中的数据[{value: 1, label: '王晓易', $treeNodeId: 2}]
 *     labelData 选中的数据label ['王晓易']
 *     defaultCheckedKeys 选中的数据id [1]
 *     dialogVisible: false 弹出框的关闭
 */
function selectData(val) {
  console.info('val', val)
  //人员
  if (val.type == 'userId') {
    if (!val.selectData.length) {
      queryForm.value[val.type] = []
      userId.value = ''
    } else {
      selectOptionObj.value[val.type] = val.selectData
      queryForm.value[val.type] = val.defaultCheckedKeys
      userId.value = val.defaultCheckedKeys
        .map(item => {
          return item.substring(1)
        })
        .join(',')
    }
    // 触发人员视图列表接口
    getAssessPersonListByUserInfo()
  }
}

/**
 * 人员input获取焦点事件
 */
const userInputFocus = () => {
  dialogParam.value.type = 'userId'
  dialogParam.value.title = '选择人员'
  dialogParam.value.dataType = 'person'
  dialogParam.value.multiple = true
  dialogParam.value.checkStrictly = false
  dialogParam.value.nodeKey = 'uuid'
  // 单位
  if (isActive.value == 'unit') {
    if (deptId.value != '') {
      dialogParam.value.apiParams = { deptId: deptId.value }
    } else {
      dialogParam.value.apiParams = { deptId: orgId.value }
    }
  } else if (isActive.value == 'leadersDept') {
    if (leadersDeptId.value != '') {
      dialogParam.value.apiParams = { deptId: leadersDeptId.value }
    } else {
      proxy.$modal.msgWarning('请选择分管部门')
      return
    }
  } else {
    dialogParam.value.apiParams = { deptId: deptId.value }
  }

  selectOptionObj.value['userId'] = []

  // 有默认值
  if (queryForm.value['userId'] && queryForm.value['userId'].length) {
    dialogParam.value.isDialog = true
    dialogParam.value.defaultCheckedKeys = queryForm.value['userId']
  } else {
    dialogParam.value.isDialog = true
    dialogParam.value.defaultCheckedKeys = []
  }
}

/**
 * 获取分管部门领导数据
 */
const getLeadersDeptData = async () => {
  // 获取分管部门领导数据
  let params = {
    userId: userStore.user.userId
  }
  getDeptListByLeader(params).then(res => {
    // 分管领导
    if (res.data != null && res.data.length > 0) {
      leadersDeptShow.value = true

      leadersDeptOptions.value = handleTree(res.data, 'deptId')
    }
  })
}

/**
 * 获取部门数据查询
 */
const getDeptData = async () => {
  let params = {
    deptId: orgId.value
  }
  treeselect(params).then(res => {
    deptData.value = res.data
    console.info(' deptData.value', deptData.value)
  })

  // const deptRes = await commonStore.getDeptTreeData()
  // deptData.value = proxy.handleTree(deptRes, 'deptId')
  // console.info(' deptData.value', deptData.value)
}

/**
 * 获取公司数据
 */
const getCompanyData = async () => {
  let param = {
    deptId: userStore.user.orgId != '484' ? userStore.user.orgId : ''
  }
  // 获取公司数据
  await commonStore.getCompanyData(param).then(data => {
    companyOptions.value = data
  })
}

/**
 * 初始化用户信息
 * @param userId
 * @returns {Promise<void>}
 */
const initUserInfo = async uid => {
  console.info(userStore.user)

  // 部门领导
  if (userStore.user.roles.findIndex(item => item.roleKey == 'bmld') != -1) {
    deptShow.value = true
  }
  // 单位领导
  if (userStore.user.roles.findIndex(item => item.roleKey == 'dwld') != -1) {
    deptShow.value = true
    unitShow.value = true
  }
  // 绩效管理员
  if (userStore.user.roles.findIndex(item => item.roleKey == 'jxgly') != -1) {
    deptShow.value = true
    unitShow.value = true
  }
  // 分管领导
  // if (userStore.user.roles.findIndex(item => item.roleKey == 'fgld') != -1) {
  //   leadersDeptShow.value = true
  // }

  userId.value = uid
  // 根据id获取用户信息
  // getUser(userId).then(res => {
  //   userInfo.value = res.data-
  //   getAssessViewListByUserId()
  // })
  //   获取当前用户分管部门数据
  await getLeadersDeptData()
  await getAssessViewListByUserId()
}

/**
 * 根据用户id获取绩效考核明细列表
 */
const getAssessViewListByUserId = () => {
  loading.value = true
  // let userId = userInfo.value.userId
  totalScore.value = 0
  let params = {
    appraiseeId: userId.value,
    assessAtTime: queryForm.value.month,
    assessTimeType: queryForm.value.assessTimeType,
    assessAtYear: queryForm.value.year,
    resultLevel: queryForm.value.level
  }
  getAssessViewList(params)
    .then(res => {
      tableData.value = res.data
      if (res.data.length > 0) {
        res.data.forEach(item => {
          totalScore.value += item.finalScore
        })
      }
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 获取个人列表
 */
const getAssessPersonListByUserInfo = () => {
  console.info(' userId.value', userId.value)
  loading.value = true
  let params = {
    apraiseeId: userId.value,
    appraiseeOrg: orgId.value,
    appraiseeDept: deptId.value,
    assessAtTime: queryForm.value.month,
    assessTimeType: queryForm.value.assessTimeType,
    assessAtYear: queryForm.value.year,
    resultLevel: queryForm.value.level
  }
  console.info('params123', params)
  getAssessPersonList(params)
    .then(res => {
      console.info(res.data)
      tableData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 获取分管部门个人列表
 */
const getLeadersPersonListByUserInfo = () => {
  console.info(' userId.value', userId.value)
  loading.value = true
  let params = {
    apraiseeId: userId.value,
    appraiseeOrg: orgId.value,
    appraiseeDept: leadersDeptId.value,
    assessAtTime: queryForm.value.month,
    assessTimeType: queryForm.value.assessTimeType,
    assessAtYear: queryForm.value.year,
    resultLevel: queryForm.value.level
  }
  console.info('params123', params)
  getAssessPersonList(params)
    .then(res => {
      console.info(res.data)
      tableData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 获取部门列表
 */
const getAssessDeptListByUserInfo = () => {
  loading.value = true
  let params = {
    appraiseeId: '',
    appraiseeOrg: orgId.value,
    appraiseeDept: deptId.value,
    assessAtTime: queryForm.value.month,
    assessTimeType: queryForm.value.assessTimeType,
    assessAtYear: queryForm.value.year,
    resultLevel: queryForm.value.level
  }
  getAssessDeptList(params)
    .then(res => {
      tableData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}
/**
 * 获取分管领导部门列表
 */
const getBranchListByUserInfo = () => {
  loading.value = true
  let deptIds =
    leadersDeptId.value != ''
      ? leadersDeptId.value
      : leadersDeptOptions.value.length > 0
      ? leadersDeptOptions.value
          .map(item => {
            return item.deptId
          })
          .join(',')
      : ''
  if (deptIds == '') {
    proxy.$modal.msgWarning('暂无分管部门')
    return
  }

  let params = {
    appraiseeId: '',
    appraiseeOrg: orgId.value,
    appraiseeDept: deptIds,
    assessAtTime: queryForm.value.month,
    assessTimeType: queryForm.value.assessTimeType,
    assessAtYear: queryForm.value.year,
    resultLevel: queryForm.value.level
  }
  getBranchList(params)
    .then(res => {
      tableData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 获取单位列表
 */
const getAssessOrgListByUserInfo = () => {
  loading.value = true
  let params = {
    appraiseeId: '',
    appraiseeOrg: orgId.value,
    appraiseeDept: '',
    assessAtTime: queryForm.value.month,
    assessTimeType: queryForm.value.assessTimeType,
    assessAtYear: queryForm.value.year,
    resultLevel: queryForm.value.level
  }
  getAssessOrgList(params)
    .then(res => {
      tableData.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * 初始化查询
 */
const init = () => {
  // 获取部门数据
  getDeptData()
  // 获取公司数据
  getCompanyData()
  //初始化查询表单
  initQueryForm()
  // 初始化按钮显示
  switchBtnShow()

  //初始化用户信息
  initUserInfo(userStore.user.userId)
}
init()
</script>

<style scoped lang="scss">
//.leadersDept {
//  ::v-deep .el-input__wrapper {
//    width: 150px !important;
//  }
//}
//::v-deep .dept {
//  width: 150px !important;
//  .el-input__wrapper {
//    width: 100px !important;
//  }
//}
//::v-deep .level {
//  width: 120px !important;
//  .el-input__wrapper {
//    width: 100px !important;
//  }
//}
//::v-deep .org {
//  width: 100px !important;
//  .el-input__wrapper {
//    width: 150px !important;
//  }
//}
//::v-deep .year {
//  width: 100px !important;
//  .el-input__wrapper {
//    width: 50px !important;
//  }
//}
//::v-deep .month {
//  width: 100px !important;
//  .el-input__wrapper {
//    width: 50px !important;
//  }
//}
.i-ion-ios-paper {
  color: var(--el-color-primary);
}
.tab-item {
  @apply text-gray-500 px-10 py-2 cursor-pointer text-xl mx-2;
}
.isActive {
  @apply rounded-full border-1 border-blue-500 border-solid text-blue-500;
}

:deep(.monthPopper) {
  width: 300px !important;
}
.monthPopper .el-select-dropdown__item {
  width: 25%;
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
}
</style>
